import { Flex, message } from 'antd'
import classNames from 'classnames'
import styles from './other-login.module.scss'
import { Link } from 'react-router-dom'
import React from 'react'

import QQPath from '@/assets/img/QQ.png'
const OtherLogin: React.FC<OtherLoginProps> = ({ flag }) => {
  /**
   * 变量集合
   */
  const [messageApi, contextHolder] = message.useMessage() //消息提示框

  /**
   * QQ 登陆
   */

  const QQLogin = () => {
    messageApi.open({
      type: 'warning',
      content: '开发中'
    })
  }

  return (
    <>
      {contextHolder}
      <div className={classNames(styles.other_login)}>
        <Flex vertical={false} align={'center'} justify={'space-between'}>
          <div>第三方登陆/注册</div>
          <Flex vertical={false} align={'center'}>
            <img src={QQPath} alt="" className={classNames(styles.qq)} onClick={QQLogin} />
          </Flex>
        </Flex>
      </div>
      <div className={classNames(styles.goto_register)} style={{ marginTop: '1.875rem' }}>
        <Flex vertical={false} align={'center'} justify={'space-between'}>
          {flag === 'register' ? (
            <div>
              已有账号，<Link to="/login">立即登陆</Link>
            </div>
          ) : (
            <div>
              没有账号，<Link to="/register">立即注册</Link>
            </div>
          )}
        </Flex>
      </div>
    </>
  )
}

export default OtherLogin
